<template>
  <el-main>
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
      <el-form-item>
        <el-input v-model="searchParm.keywords" placeholder="关键字查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="searchBtn">搜索</el-button>
        <el-button icon="Close" @click="resetBtn">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableDate" border stripe>
      <el-table-column prop="image" width="90" label="课程封面" align="center">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px; border-radius: 50%"
            :src="scope.row.image"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称"></el-table-column>
      <el-table-column prop="courseHour" label="课时"></el-table-column>
      <el-table-column prop="coursePrice" label="价格"></el-table-column>
      <el-table-column prop="name" label="报名学生"></el-table-column>
      <el-table-column prop="teacherName" label="授课教师"></el-table-column>
      <el-table-column prop="createTime" label="报名时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '1'" type="warning" size="default"
            >已退款</el-tag
          >
          <el-tag v-if="scope.row.status == '0'" type="success" size="default"
            >报名成功</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="global.$checkPermission(['sys:courseOrder:return'])"
        label="操作"
        align="center"
        width="290"
      >
        <template #default="scope">
          <el-button
            v-permission="['sys:courseOrder:return']"
            type="warning"
            :icon="Edit"
            size="default"
            @click="repalyBtn(scope.row)"
            >退款</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page.sync="searchParm.currentPage"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="searchParm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="searchParm.total"
      background
    >
    </el-pagination>
  </el-main>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { orderListApi } from "@/api/course/index";
import useInstance from "@/hooks/useInstance";
import { replayApi } from "@/api/course/index";
import { ElMessage } from "element-plus";

import { CourseType } from "@/api/course/CourseModel";

const { global } = useInstance();
//列表查询参数
const searchParm = reactive({
  keywords: "",
  name: "",
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
//页容量改变时触发
const sizeChange = (size: number) => {
  searchParm.pageSize = size;
  getList();
};
//页数改变时触发
const currentChange = (page: number) => {
  searchParm.currentPage = page;
  getList();
};
//搜索
const searchBtn = () => {
  getList();
};
//重置
const resetBtn = () => {
  searchParm.name = "";
  searchParm.keywords = "";
  searchParm.currentPage = 1;
  searchParm.pageSize = 10;
  getList();
};
const tableDate = ref([]);
const getList = async () => {
  let res = await orderListApi(searchParm);
  if (res && res.code == 200) {
    tableDate.value = res.data.records;
    searchParm.total = res.data.total;
  }
};
const repalyBtn = async (row: CourseType) => {
  const confirm = await global.$myconfirm("确定退款吗?");
  if (confirm) {
    if (row.status == "1") {
      ElMessage.warning("该课程已经退款，不要重复退款!");
      return;
    }
    let res = await replayApi(row.memberCourseId as string);
    if (res && res.code == 200) {
      ElMessage.success(res.msg);
      getList();
    }
  }
};
const tableHeight = ref(0);
onMounted(() => {
  getList();
  nextTick(() => {
    tableHeight.value = window.innerHeight - 220;
  });
});
</script>

<style scoped></style>
